<template>
  <div class="recordDetail" v-if="props.showDialog">
    <Dialog
      diaTop="3"
      headerName="管控企业组"
      :showDialog="true"
      @close="close"
      @save="save"
      saveLetter="保存"
      diaWidth="95"
      footerTop="10"
      :footerShow="false"
    >
      <template #content>
        <div class="content-wrap">
          <el-form
            ref="form"
            :model="formData"
            :inline="true"
            label-width="120px"
          >
            <el-form-item label="企业名称：" prop="enterpriseName">
              <el-input v-model="formData.customername" clearable></el-input>
            </el-form-item>

            <el-form-item label="企业类别：">
              <el-input v-model="formData.managementtype" clearable></el-input>
              <!-- <el-select
                v-model="formData.managementtype"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in enterpriseTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
            </el-form-item>

            <el-form-item label="排污许可证号：">
              <el-input v-model="formData.creditcode" clearable></el-input>
              <!-- <el-select
                v-model="formData.creditcode"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
            </el-form-item>

            <el-form-item>
              <el-button
                class="add btn"
                type="primary"
                style="background-color: #0874fa"
                @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
              <el-button
                class="add group"
                style="margin-left: 16px"
                @click="handlerAdd"
                ><el-icon
                  style="color: #fff; margin-right: 5px; font-size: 20px"
                  ><DocumentAdd /></el-icon
                >添加企业</el-button
              >
              <button class="remove-btn" @click="delEnterpeise">移除</button>
              <el-button
                class="add down"
                style="
                  margin-left: 16px;
                  background-color: #f57618;
                  opacity: 0.6;
                "
                @click="handlerDownload"
              >
                <Svg name="xiazai" width="20" height="20" color="#fff"> </Svg>
                &nbsp;模板下载</el-button
              >
              <Upload
                :uploadFileUrl="importUrl"
                :groupid="props.groupId"
                @getFile="handlerImport"
              >
                <template #content>
                  <el-button
                    class="add"
                    @click="importFile"
                    style="margin-left: 16px; background-color: #f57618"
                  >
                    <Svg name="daoru" width="20" height="20" color="#fff">
                    </Svg>
                    &nbsp;导入</el-button
                  >
                </template>
              </Upload>
            </el-form-item>
          </el-form>
          <div class="table-wrap data-wrap">
            <el-table
              :data="facilityList"
              border
              class="table-height"
              style="width: 100%"
              @selection-change="toggleRowSelection"
            >
              <el-table-column type="selection" align="center" />
              <el-table-column
                prop="customername"
                align="center"
                label="企业名称"
              />
              <el-table-column
                prop="managementtype"
                align="center"
                label="企业类别"
              />
              <!-- <el-table-column
                prop="name"
                align="center"
                label="排污许可证号"
              /> -->
              <el-table-column prop="hbperson" align="center" label="联系人" />
              <el-table-column prop="hbmobile" align="center" label="手机号" />
              <el-table-column
                prop="customeraddress"
                align="center"
                label="企业地址"
              />
              <el-table-column prop="name" align="center" label="企业状态">
                <template #default="{ row }">
                  <div>
                    {{
                      statusList.find((item) => item.value == row.status)?.label
                    }}
                  </div>
                </template>
              </el-table-column>

              <!-- <el-table-column label="操作" width="180" align="center">
                <template #default="{ row }">
                  <div class="btn-wrap">
                   
                  </div>
                </template>
              </el-table-column> -->
            </el-table>
            <div style="padding-right: 60px; margin-top: 25px">
              <Pagination
                v-model:currentPage="formData.page"
                :total="total"
                v-model:page-size="formData.pagesize"
                @getDataList="getList"
              />
            </div>
          </div>
        </div>
      </template>
    </Dialog>
    <AddControlEnterprise
      v-model:showDialog="addControl"
      :groupId="props.groupId"
      @getList="getList"
    ></AddControlEnterprise>
    <OperatorDia v-model:showDialog="showDelDiag" @save="delDialogEnterpeise" />
    <NoImport
      v-model:showDialog="noImportFlag"
      :filterEnterprise="filterEnterprise"
      @save="noSave"
    />
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import OperatorDia from "@/components/operateDialog";
import AddControlEnterprise from "./addControlEnterprise";
import NoImport from "./noImport";
import Upload from "@/components/Upload";
import ElMessage from "@/components/ElMessage.js";
import http from "@http";
let props = defineProps(["showDialog", "groupId"]);
watch(
  () => props.groupId,
  () => {
    formData.groupid = props.groupId;
    getList();
  }
);
let emit = defineEmits(["update:showDialog", "save"]);
let showDelDiag = ref(false);
let addControl = ref(false);
let noImportFlag = ref(false);
let formData = reactive({ page: 1, pagesize: 10 });
let pagiFacilityParams = reactive({});
let pagiFacilityTotal = ref(1);
let statusList = ref([]);
let loading = ref(false);
let filterEnterprise = ref([]);
let handlerImport = (e) => {
  filterEnterprise.value = e.data;

  noImportFlag.value = true;

  getList();
};
let noSave = () => {
  filterEnterprise.value.length = 0;
  noImportFlag.value = false;
};
let enterpriseTypeList = ref([]);
let ids = ref([]);
let facilityList = ref([]);
let total = ref(0);
let importUrl = import.meta.env.VITE_IMPORT;
let importFile = () => {
 
  setTimeout(() => {
    loading.close();
  }, 2000);
};
let close = () => {
  emit("update:showDialog", false);
};
let save = () => {
  emit("save");
};
let delEnterpeise = (id) => {
  if (ids.value == "") {
    ElMessage({ type: "error", msg: "请选择要移除的企业！" });
    return;
  }
  showDelDiag.value = true;
};
let delDialogEnterpeise = () => {
  http({ url: "/admPCNoticeGroupDetail/delete", data: { id: ids.value } }).then(
    (res) => {
      if (res.code == 0) {
        showDelDiag.value = false;
        getList();
        ids.value = "";
      }
    }
  );
};
http({ url: "/listitem/getmodule", data: { module: "B05" } }).then((res) => {
  if (res.code == 0) {
    enterpriseTypeList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
let handlerDownload = () => {
  let a = document.createElement("a");
  a.href =
    "https://splendid.oss-cn-beijing.aliyuncs.com/static/moban/%E9%A2%84%E8%AD%A6%E9%80%9A%E7%9F%A5%E4%BC%81%E4%B8%9A%E5%88%86%E7%BB%84%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls";
  a.click();
};
let toggleRowSelection = (row) => {
  ids.value = row.map((item) => item.id).join(",");
};
//新增
let handlerAdd = () => {
  addControl.value = true;
};
let handelDetail = () => {
  recordFlag.value = true;
};
let editDetail = () => {};
let getList = () => {
  http({ url: "/admPCNoticeGroupDetail/datalist", data: formData }).then(
    (res) => {
      if (res.code == 0) {
        facilityList.value = res.data.list;
        total.value = res.data.total;
        ElMessage({ msg: "查询成功" });
      }
    }
  );
};
http({ url: "/listitem/getmodule", data: { module: "B06" } }).then((res) => {
  if (res.code == 0) {
    statusList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.recordDetail {
  .dia-record-detail {
    .line {
      display: flex;
      justify-content: space-between;
      padding-left: 70px;
      padding-right: 50px;
      margin-top: 30px;
      .left-name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        flex: 1;
        color: #333333;
        button {
          color: #0874fa;
          font-weight: 400;
          font-size: 24px;
        }
      }
      .right-name {
        flex: 1;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        margin-left: 130px;
        text-align: left;
        display: flex;

        button {
          color: #0874fa;
          font-weight: 400;
          font-size: 24px;
        }
      }
    }
  }
  .content-wrap {
    .add.down {
      width: 120px;
    }
    .add {
      background-color: #009944;
      box-shadow: none;
      color: #fff;
      width: 89px;
      height: 37px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
    }
    :deep(.el-input) {
      width: 230px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #666666 !important;
    }
    .remove-btn {
      margin-left: 15px;
      width: 100px;
      height: 37px;
      font-size: 20px;
      font-weight: 400;
      color: #ff0f0f;
      background-color: #ffcccc;
      border-radius: 5px;
    }
    .add.btn {
      width: 89px;
      height: 37px;
    }
    .add.group {
      width: 120px;
    }
    .data-wrap {
      height: 72vh;
      overflow-y: scroll;
      .table-height {
        height: 65vh;
      }
      .btn-wrap {
        display: flex;
        justify-content: center;
        padding-left: 19px;
        padding-right: 17px;
      }
      :deep(.el-input) {
        width: 140px;
      }
      :deep(.is-in-pagination) {
        width: 70px !important;
      }
    }
    .qr-code {
      width: 826px;
      height: 263px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .content {
        display: flex;
        flex-direction: column;
        img {
          width: 190px;
          height: 182px;
        }
        button {
          margin-top: 5px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #0874fa;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }

  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }
  :deep(.el-table thead tr > th) {
    height: 60px !important;
    background: #f9fafe !important;
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 21px !important;
    color: #333333 !important;
  }

  :deep(.el-pagination) {
    .is-active,
    .number {
      width: 33px;
      height: 33px;
      background: #007cff;
    }

    :deep(.el-pagination__goto, .el-pagination__classifier) {
      color: #666;
      font-weight: 400;
      font-size: 21px;
    }

    :deep(.el-input__inner) {
      color: #666;
      font-size: 21px !important;
      width: 20px;
    }
    :deep(.el-pagination__total) {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 21px;
      color: #666666;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev {
      background: transparent !important;

      font-size: 21px;
      width: 30px !important;
      height: 30px !important;
    }

    .el-pagination.is-background .btn-next.is-active,
    .el-pagination.is-background .btn-prev.is-active,
    .el-pagination.is-background .el-pager li.is-active {
      color: #666 !important;
      font-size: 21px;
    }
  }
  :deep(.el-dialog__header) {
    padding-bottom: 0px !important ;
  }
  :deep(.el-icon) {
    font-size: 19px;
  }
}
</style>
